<template>
    <div class="platform-page page">
        <div class="content">
            <PlatformCrumb back="返回">
                <span>字典管理</span>
            </PlatformCrumb>
            <div class="upload">
                <el-form label-width="120px">
                    <el-form-item label="请选择类型">
                        <el-select @change="changetype" v-model="type" placeholder="请选择">
                            <el-option
                                    v-for="item in typelist"
                                    :key="item.value"
                                    :label="item.title"
                                    :value="item.value">
                            </el-option>
                        </el-select>
                        <el-button style="margin-left: 20px" size="mini" v-if="type!=''" @click="addlist"
                                   type="primary">新增
                        </el-button>
                    </el-form-item>
                    <el-table
                            :data="list"
                            style="width: 100%">
                        <el-table-column
                                prop="dictName"
                                label="字典名称"
                        >
                            <template slot-scope="scope">
                                <span v-if="active==scope.$index"><el-input v-model="activedata.dictName"
                                                                            placeholder="请输入内容"></el-input></span>
                                <span v-else-if="scope.$index==0 && isadd"><el-input v-model="scope.row.dictName"
                                                                                     placeholder="请输入内容"></el-input></span>
                                <span v-else>{{scope.row.dictName}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="remarks"
                                label="字典备注"
                        >
                            <template slot-scope="scope">
                                <span v-if="active==scope.$index"><el-input v-model="activedata.remarks"
                                                                            placeholder="请输入内容"></el-input></span>
                                <span v-else-if="scope.$index==0 && isadd"><el-input v-model="scope.row.remarks"
                                                                                     placeholder="请输入内容"></el-input></span>

                                <span v-else>{{scope.row.remarks}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="dictNo"
                                label="字典数值"
                        >
                            <template slot-scope="scope">
                                <span v-if="active==scope.$index">{{activedata.dictNo}}</span>
                                <span v-else>{{scope.row.dictNo}}</span>
                            </template>
                        </el-table-column>
                        <el-table-column
                                prop="dictType"
                                label="字典类型"
                        >
                            <template slot-scope="scope">
                                <span v-if="active==scope.$index">{{activedata.dictType}}</span>
                                <span v-else>{{scope.row.dictType}}</span>
                            </template>
                        </el-table-column>

                        <el-table-column
                                label="操作"
                                width="120">
                            <template slot-scope="scope">
                                <div v-if="active==scope.$index">
                                    <el-button
                                            @click.native.prevent="sysDictTypeedit(scope.row)"
                                            type="text"
                                            size="small">
                                        保存
                                    </el-button>
                                    <el-button
                                            @click.native.prevent="cancel"
                                            type="text"
                                            size="small">
                                        取消
                                    </el-button>
                                </div>
                                <div v-else-if="scope.$index==0 && isadd==1">
                                    <el-button
                                            @click.native.prevent="sysDictTypeadd(scope)"
                                            type="text"
                                            size="small">
                                        新增
                                    </el-button>
                                    <el-button
                                            @click.native.prevent="canceladd"
                                            type="text"
                                            size="small">
                                        取消
                                    </el-button>
                                </div>
                                <div v-else>
                                    <el-button
                                            @click.native.prevent="edittype(scope.$index)"
                                            type="text"
                                            size="small">
                                        编辑
                                    </el-button>
                                    <el-button
                                            v-if="list.length>=2"
                                            @click.native.prevent="sysDictTypedetele(scope.row.id)"
                                            type="text"
                                            size="small">
                                        移除
                                    </el-button>
                                    <el-button
                                            v-else
                                            disabled
                                            type="text"
                                            size="small">
                                        移除
                                    </el-button>
                                </div>
                            </template>
                        </el-table-column>
                    </el-table>

                </el-form>
            </div>
        </div>
    </div>
</template>

<script>
    import PlatformCrumb from "@/components/PlatformCrumb.vue";
    import {sysDictTypeedit, sysDictTypeadd, sysDictTypegetTypeList} from '../../api/api/platform.js';
    import {imgupload, videoupload, fileupload, basefile, baseImgPath} from '@/config/env.js';

    export default {
        components: {
            PlatformCrumb,
        },
        data() {
            return {
                typelist: [
                    {
                        title: '语言能力',
                        value: 'YYNL',
                    }, {
                        title: '足球教练等级',
                        value: 'JLDJ',
                    }, {
                        title: '学历',
                        value: 'XL',
                    }, {
                        title: '在读年级',
                        value: 'ZDNJ',
                    }, {
                        title: '服装尺码',
                        value: 'FZCM',
                    }, {
                        title: '分组',
                        value: 'FZ',
                    }, {
                        title: '球员技巧',
                        value: 'JQ',
                    }, {
                        title: '球员风格',
                        value: 'FG',
                    }, {
                        title: '课程类型',
                        value: 'CT',
                    },
                ],
                list: [],
                type: '',
                active: -1,
                activedata: {
                    dictType: '',
                    dictName: '',
                    dictNo: '',
                    remarks: '',
                },
                isadd: 0

            };
        },
        created() {

        },
        methods: {
            edittype(e) {
                this.active = e
                this.activedata = this.list[e]
            },
            cancel() {
                this.active = -1
                this.activedata = {
                    dictType: '',
                    dictName: '',
                    dictNo: '',
                    remarks: '',
                }
            },
            // 增加
            addlist() {
                if (!this.isadd) {
                    this.activedata.dictType = this.type
                    var length = this.list.length
                    console.log(length);
                    console.log(this.list[length - 1]);
                    this.activedata.dictNo = this.list.length ? parseInt(this.list[length - 1].dictNo) + 1 : 0
                    this.list.unshift(this.activedata)
                    this.isadd = 1
                }
            },
            // 取消添加
            canceladd() {
                if (this.isadd) {
                    this.list.splice(0, 1)
                    this.isadd = 0
                }
            },
            // 选择分类
            changetype() {
                this.sysDictTypegetTypeList()
            },
            // 编辑字典
            sysDictTypeedit(e) {
                var that = this;
                console.log(e);
                sysDictTypeedit(e).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '更新成功',
                            type: 'success'
                        });
                        this.active = -1
                    }
                });
            },
            // 编辑字典
            sysDictTypedetele(e) {
                var that = this;
                sysDictTypeedit({id: e, status: 1}).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        });
                        this.sysDictTypegetTypeList()
                    }
                });
            },
            // 增加字典
            sysDictTypeadd(e) {
                var that = this;
                console.log(e.row);
                sysDictTypeadd(e.row).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        this.$message({
                            message: '添加成功',
                            type: 'success'
                        });
                        this.activedata = {
                            dictType: '',
                            dictName: '',
                            dictNo: '',
                            remarks: '',
                        }
                        this.isadd = 0
                        this.sysDictTypegetTypeList()
                    }
                });
            },
            // 获取字典列表
            sysDictTypegetTypeList() {
                var that = this;
                sysDictTypegetTypeList({type: this.type}).then(res => {
                    console.log(res);
                    if (res.code == 200) {
                        that.list = res.data.list
                        this.isadd = 0
                    }
                });
            },
        },
        filters: {
            filtersImg: function (img) {
                return basefile + img
            },
        }
    };
</script>

<style lang="less" scoped>
    @import url("platform.less");

    @deep: ~">>>";

    .upload {
        background: #fff;
        padding: 30px 30px;
    }

    .upload-item {
        margin-bottom: 30px;

        > .title {
            &::before {
                width: 4px;
                height: 18px;
                background-color: #c60818;
                display: inline-block;
                content: " ";
                margin-right: 10px;
                vertical-align: -3px;
            }

            .name {
                font-size: 16px;
            }

            .desc {
                font-size: 12px;
                color: #999;
                margin-left: 15px;
            }
        }
    }

    .upload-con {
        margin-top: 24px;

        @{deep} {
            .el-upload {
                border: 1px dashed #d9d9d9;
                border-radius: 6px;
                cursor: pointer;
                position: relative;
                overflow: hidden;

                &:hover {
                    border-color: #409eff;
                }
            }
        }

        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 98px;
            height: 98px;
            line-height: 98px;
            text-align: center;
        }

        .avatar {
            width: 98px;
            height: 98px;
            display: block;
        }

        .sub-title {
            margin-bottom: 27px;
        }

        .upload-con-item {
            margin-right: 68px;

            @{deep} {
                .el-button {
                    margin-top: 20px;
                    float: right;
                }
            }
        }
    }
</style>
